<template>
  <div class="banner_list table-theme">
    <el-card>
      <div class="banner-top-menu">
        <div class="banner-menu-left">
          <div class="all-check">
            <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
              >全选</el-checkbox
            >
          </div>
          <div class="sort-view">
            <el-select v-model="status" placeholder="类型" @change="init(1)">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="sort-view">
            <el-select
              v-model="use_scenarios"
              placeholder="使用场景"
              @change="init(1)"
            >
              <el-option
                v-for="item in useScenariosList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="sort-view">
            <el-select
              v-model="customized_type"
              placeholder="定制类型"
              @change="init(1)"
            >
              <el-option
                v-for="item in customizedTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="client-view">
            <el-select
              v-model="style"
              placeholder="优惠卷类型"
              @change="init(1)"
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>

        <div class="banner-menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
        </div>
      </div>
      <p style="text-align: right; line-height: 30px">
        总优惠卷数：{{ total }}
      </p>
      <div class="goods-list">
        <div
          class="goods-item"
          v-for="(item, index) in couponList"
          :key="index"
        >
          <div class="goods-checkbox">
            <el-checkbox
              v-model="item.checkbox"
              :disabled="item.disabled"
              @change="onDelCheckbox(item.coupon_id)"
            ></el-checkbox>
          </div>
          <div class="goods-content" @click="checkboxClick(item)">
            <ImgPopover style="margin-top: 5px" :src="item.icon"></ImgPopover>
            <div class="text">
              <div class="text-info">
                <p class="goods-name">名称:{{ item.coupon_name }}</p>
                <p class="goods-type">类型:{{ item.typeName }}</p>
              </div>
              <div class="text-info">
                <p class="goods-satisfy">满减金额:{{ item.satisfy_money }}</p>
                <p class="goods-money">优惠卷金额:{{ item.money }}</p>
              </div>
              <div class="text-info">
                <p class="goods-useTypeName">B端/C端:{{item.useTypeName}}</p>
                <p class="goods-discount">折扣:{{item.discount}}</p>
              </div>
              <div class="text-info">
                <p class="add-time">添加时间:{{ item.add_time }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
      <div style="padding: 20px 10px">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="addFabricClick">确 定</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
export default {
  props: {
    layerid: {
      type: String,
      default: "",
    },
    shelf_id: {
      type: Number,
      default: 0,
    },
    goods_type: {
      type: Number,
      default: 0,
    },
  },
  components: {
    ImgPopover,
  },
  data() {
    return {
      couponList: [],
      total: 0,
      status: 1,
      use_scenarios: 0,
      customized_type: 0,
      style: "",
      statusList: [
        {
          value: 1,
          label: "上架",
        },
        {
          value: 2,
          label: "下架",
        },
      ],
      useScenariosList: [
        {
          value: 0,
          label: "线上",
        },
        {
          value: 1,
          label: "线下",
        },
      ],
      customizedTypeList: [
        {
          value: 0,
          label: "家具大师",
        },
        {
          value: 1,
          label: "家配大师",
        },
      ],
      typeList: [
        {
          value: 1,
          label: "新用户赠送",
        },
        {
          value: 2,
          label: "活动",
        },
        {
          value: 3,
          label: "买会员送",
        },
        {
          value: 4,
          label: "续费",
        },
        {
          vlaue: 5,
          label: "赠送",
        },
      ],
      page: 0,
      checkAll: false,
      couponCheckboxList: [], //保留选中
      allLength: 0,
      couponDisabledList: [], //回显已选中不给
    };
  },
  methods: {
    // 初始化列表
    init(e) {
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 10,
        status: this.status,
        customized_type: this.customized_type,
        use_scenarios: this.use_scenarios,
        style: this.style,
      };
      this.onPushData();
      this.onSetData();
      this.$http(this.$ApiList.CardList, data).then((res) => {
        const { data, count } = res.datas;
        this.couponList = data.map((item) => {
          this.$set(item, "checkbox", false);
          this.$set(item, "disabled", false);
          return item;
        });
        this.total = count;
        this.onSelectState();
        this.onSetEcho();
        if (this.allLength === 10) {
          this.checkAll = true;
        } else {
          this.checkAll = false;
        }
      });
    },
    refreshPage() {
      this.page = 1;
      this.checkAll = false;
      this.init(1);
    },
    checkboxClick(item) {
      if (item.disabled) {
        this.$message.error("此优惠卷已关联,请勿重复操作！");
        return false;
      }
      if (item.checkbox) {
        item.checkbox = false;
      } else {
        item.checkbox = true;
      }
    },
    cancel() {
      this.$layer.close(this.layerid);
    },
    handleCheckAllChange() {
      if (this.checkAll) {
        this.couponList.forEach((item) => {
          item.checkbox = true;
        });
      } else {
        this.couponList.forEach((item) => {
          if (!item.disabled) {
            item.checkbox = false;
            this.onDelCheckbox(item.coupon_id);
          }
        });
      }
    },
    addFabricClick() {
      this.onPushData();
      this.onSetData();
      if (!this.couponCheckboxList.length) {
        this.$layer.msg("至少选择一个");
        return;
      }
      let data = {
        shelf_id: this.shelf_id,
        goods_type: this.goods_type,
        goods_ids: this.couponCheckboxList.join(","),
      };
      this.$http(this.$ApiList.ShelfGoodsAdd, data).then((res) => {
        this.$layer.msg(res.datas);
        this.init();
        this.checkAll = false;
        this.$parent.init();
        this.$layer.close(this.layerid);
      });
    },
    // 添加选中的数据
    onPushData() {
      this.couponList.forEach((item) => {
        if (item.checkbox) {
          this.couponCheckboxList.push(item.coupon_id);
        }
      });
    },
    // 保留已选中的状态
    onSelectState() {
      let allLength = 0;
      if (this.couponCheckboxList.length) {
        this.couponList = this.couponList.map((item) => {
          this.couponCheckboxList.forEach((data) => {
            if (item.coupon_id == data) {
              this.$set(item, "checkbox", true);
              allLength++;
            }
          });
          return item;
        });
      }
      this.allLength = allLength;
    },
    // 保留的数据去重
    onSetData() {
      if (this.couponCheckboxList.length) {
        this.couponCheckboxList = Array.from(new Set(this.couponCheckboxList));
      }
    },
    onDelCheckbox(goods_id) {
      this.couponCheckboxList.forEach((data, index) => {
        if (data == goods_id) {
          this.couponCheckboxList.splice(index, 1);
        }
      });
    },
    // 打开后回显
    initSelect() {
      let data = {
        page: 0,
        shelf_id: this.shelf_id,
        goods_type: this.goods_type,
        order_by: "shelf_goods_id",
        asc: 2,
        limit: 100,
      };
      this.couponDisabledList = [];
      this.$http(this.$ApiList.ShelfGoodsList, data)
        .then((res) => {
          res.datas.data.forEach((item) => {
            this.couponDisabledList.push(item.goods_id);
          });
        })
        .then(() => {
          this.init();
        });
    },
    onSetEcho() {
      if (this.couponDisabledList.length) {
        this.couponList.forEach((item) => {
          this.couponDisabledList.forEach((data) => {
            if (item.coupon_id == data) {
              this.$set(item, "checkbox", true);
              this.$set(item, "disabled", true);
            }
          });
        });
      }
    },
  },
  created() {
    this.initSelect();
  },
};
</script>
<style lang="scss" scoped>
.banner_list {
  width: 100%;
}
.banner_list .banner-top-menu {
  display: flex;
}

.banner-menu-left {
  flex: 1;
  display: flex;
}
.banner-menu-right {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
}

.banner-top-menu .add,
.banner-top-menu .sort-view {
  margin-right: 10px;
}

.banner-top-menu .sort-view,
.banner-top-menu .client-view {
  width: 150px;
}
.all-check {
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.goods-list {
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  .goods-checkbox {
    width: 16px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }
  .goods-item {
    padding: 15px 10px;
    margin-top: 10px;
    margin-right: 10px;
    display: flex;
    width: 370px;
    height: 140px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box;
    .goods-content {
      flex: 1;
      display: flex;
      /deep/ .img-popover img {
        width: 50px !important;
        height: 100px !important;
      }
      .text {
        flex: 1;
        margin-left: 10px;
      }
    }
  }
}
.text-info {
  display: flex;
  p {
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .goods-name,
  .goods-satisfy,
  .goods-useTypeName {
    flex: 5;
  }
  .goods-type,
  .goods-money,
  .goods-discount {
    flex: 3;
    margin-left: 5px;
  }
}
.text-bottom {
  display: flex;
  line-height: 30px;
}
.text-bottom p {
  flex: 1;
}
</style>
